<template>
	<view class="isDisplay isScroll" >
		<view class="company-list-item" v-for="item in list">
			<view class="top isDisplay">
				<img :src="item.img" alt="" />
				<view class="company-name"><text style="color: rgba(102, 110, 122, 1);font-size: 27.52rpx;">{{item.CompanyName}}</text></view>
				<img src="../static/images/icon.png" alt="" />
			</view>
			<view class="job-name">
				<text style="color: rgba(40, 33, 31, 1);font-size:32.11rpx ;">{{item.jobName}}</text>
			</view>
			<view class="job-position">
				<text style="color:rgba(102, 110, 122, 1) ;font-size: 25.23rpx;">{{item.jobPosition[0]}},{{item.jobPosition[1]}}</text>
			</view>
			<view class="job-status">
				<text style="font-size: 25.23rpx;color:rgba(253, 119, 83, 1) ;">{{item.jobStatus}}</text>
			</view>
			<view class="isDisplay">
				<view class="isDisplay" style="margin-right: 30rpx;">
					<view class="img-view"><img src="../static/images/user.png" alt="" /></view>
					<text>{{item.userNum}}</text>
				</view>
				<view class="isDisplay">
					<view class="img-view"><img src="../static/images/Show.png" alt="" /></view>
					<text>{{item.warchNum}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const list=[
		{
			img:"../static/images/company/logo.png",
			CompanyName:"公司名称",
			jobName:"UI设计师",
			jobPosition:["北京","朝阳"],
			jobStatus:"全职",
			jobNeed:"我们正在寻找UI设计师，您可以在这里申请。 好品味是这个角色的加分项",
			userNum:"80",
			warchNum:"456",
		},
		{
			img:"../static/images/company/logo1.png",
			CompanyName:"公司名称",
			jobName:"UX交互设计师",
			jobPosition:["北京","朝阳"],
			jobStatus:"全职",
			jobNeed:"我们正在寻找UI设计师，您可以在这里申请。 好品味是这个角色的加分项",
			userNum:"36",
			warchNum:"317",
		},
		{
			img:"../static/images/company/logo2.png",
			CompanyName:"公司名称",
			jobName:"前端开发工程师",
			jobPosition:["北京","朝阳"],
			jobStatus:"全职",
			jobNeed:"我们正在寻找UI设计师，您可以在这里申请。 优秀的代码编写习惯是这个角色的加分项",
			userNum:"36",
			warchNum:"317",
		},
		{
			img:"../static/images/company/logo3.png",
			CompanyName:"淘宝店-有料素材店",
			jobName:"UI页面设计师",
			jobPosition:["北京","朝阳"],
			jobStatus:"全职",
			jobNeed:"我们正在寻找UI设计师，您可以在这里申请。 好品味是这个角色的加分项",
			userNum:"36",
			warchNum:"317",
		},
		{
			img:"../static/images/company/logo4.png",
			CompanyName:"公司名称",
			jobName:"前端高级工程师",
			jobPosition:["北京","朝阳"],
			jobStatus:"全职",
			jobNeed:"我们正在寻找UI设计师，您可以在这里申请。 好品味是这个角色的加分项",
			userNum:"36",
			warchNum:"317",
		},
		{
			img:"../static/images/company/logo5.png",
			CompanyName:"有料素材店",
			jobName:"前端开发工程师",
			jobPosition:["北京","丰台"],
			jobStatus:"全职",
			jobNeed:"我们正在寻找UI设计师，您可以在这里申请。好的代码编写习惯是这个角色的加分项",
			userNum:"36",
			warchNum:"317",
		},
	]
</script>

<style>
.isDisplay{
	display: flex;
}
.isScroll{
	overflow-x: auto;
	gap: 30rpx; /* 项目间距 */
	padding: 10rpx 0;
}
.company-list-item{
    flex: 0 0 auto;
	width: 394.5rpx;
	height: 385.32rpx;
	border:#EEEEEE 2rpx solid ;
	padding: 35rpx;
	border-radius: 10rpx;
}
.top{
	margin-bottom: 30rpx;
	height:50rpx ;
}
.top img{
	width:45.87rpx ;

}
.company-name{
	width: 201.83rpx;
	margin:0 20rpx ;
	height:50.46rpx ;
	overflow: hidden; /* 超出部分隐藏 */
	white-space: nowrap; /* 禁止换行 */
	text-overflow: ellipsis; /* 超出显示省略号 */
}
.job-name{
	margin-bottom: 20rpx;
	height:50.46rpx ;
	
}
.job-position{
	margin-bottom: 20rpx;
	height: 36.7rpx;
}
.job-status{
	margin-bottom: 30rpx;
	height: 36.7rpx;
}
.img-view{
	width:36.7rpx ;
	height:36.7rpx ;
	margin-right: 15rpx;
}
</style>